[CSS] transform 속성에 상대값 사용하여 요소 이동시 발생하는 여백 또는 선 제거하는 방법

세로 저ㅇ렬을 하거나 요소을 이동시키기 위해 다양한 방법이 사용가능하다~ 그중에서도 transform 속성을 사용하는 방법 역시 존재한다.

! transform 속성을 이용한 요소의 이동

아래와 같은 방법으로 우리는 transform을 사용해 이미지를 비롯한 다양한 요소를 원하는 곳으로 이동할 수 있다.


위 코드는 div 요소를 좌우 x, y 값만큼 이동시키는 방법이다. 이 방법은 요소를 이동시키는 다양한 방법들과 비교할 때 몇가지 이점이 있는데 그 이유가 무엇인지 알아보자...


transform 속성을 사용하는 사장 큰 이유는 바로 좌우 상하 이동시 절대값 뿐만 아니라 상대값을 이용한 이동이 가능하다는 점이다... 좀 더 쉽게 설명하자면...



위 보기는 두 가지 방법을 보여주는데 여기서 아래에 위치한 예는 퍼센트(%)를 사용한 상대 수치의 이동이 가능하게 된다.


이게 중요한 이유는 이동에 사용 가능한 margin 또는 top, left 등의 속성으로 동일한 효과 구현이 불가능하기 때문이다.

margin의 경우 정확한 값을 필요로하며 top, left 등에 퍼센트(%)사용은 가능하지만 이는 부모 요소를 기준으로한 이동이 가능하다...


너무 멀리 와버렸다. 이 속성을 사용할 때 나타나는 이슈를 설명하려다 닭잡는 칼로 소를 잡아버렸는데 ... 어쨌든 이 속성을 사용할 경우 아래와 같은 이슈가 나타날 수 있음을 알자.


기대하지 않은 선 또는 공간이 요소간의 사이가 발생

항상 그런 것은 아니나 이런 이슈가 발생하였다면 어떻게 해야할까?? 우선적으로 해당 요소의 width, height속성이 홀수값을 가졌는지... 아니면 짝수값을 가졌는지 체크가 우선시 되어야할 것이다...

그 이유는 상대이동의 경우 픽셀의 소수점 단위가 발생 가능하고 이 때문에 브라우저 렌더링 과정에서 의도치 않은 현상이 발견될 수 있기 때문이다.

간단하게 수정이 가능하나 수정하였음에도 일부 디바이스 및 환경에서 여전히 해당 이슈가 나타날 수 있다. 이 경우 이 속성을 다른 속성으로 대체하는 방법 외에 아직 뚜렸한 방법은 없다는 점을 참고하자!